<template>
  <div>
    <el-dialog title="新增/编辑一级类别" :visible.sync="addfirstCatevis" @close="close" width="500px" append-to-body>
        <el-form :rules="rules" :model="addfirstCateForm" ref="addfirstCateForm">

            <el-form-item label="类别编号:" prop="categoryNumber" :label-width="formLabelWidth">
                <el-input v-model="addfirstCateForm.categoryNumber"></el-input>
            </el-form-item>
            <el-form-item label="类别名称:" prop="categoryName" :label-width="formLabelWidth">
                <el-input v-model="addfirstCateForm.categoryName"></el-input>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="addfirstCateForm.categoryRemark" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="创建时间:" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="addfirstCateForm.categoryTime" style="width: 100%;"></el-date-picker>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="danger" :loading="submitLoading" @click="submitProdCategory('addfirstCateForm')">确 定</el-button>
        </div>
          </el-dialog>
        </div>
</template>

<script>
import { AddCarFirstCate, EditCarFirstCate } from '@/api/car';
export default {
  name: 'addfirstcate',
  props: ['addFirstCate', 'checkCategory', 'addTwoId'],
  data() {
    return {
      addfirstCatevis: false,
      submitLoading: false,
      addfirstCateForm: {
        categoryNumber: '',
        categoryName: '',
        categoryRemark: '',
        categoryTime: new Date()
      },
      formLabelWidth: '90px',
      rules: {
          categoryNumber: [
            { required: true, message: '请输入分类编号', trigger: 'blur' },
          ],
          categoryName: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
      }
    }
  },
  methods: {
    close() {
      this.addfirstCatevis = false;
      this.resetForm();
      this.$emit("update:addFirstCate", false);
    },
    resetForm() {
      this.addfirstCateForm.categoryNumber = '';
      this.addfirstCateForm.categoryName = '';
      this.addfirstCateForm.categoryRemark = '';
      this.addfirstCateForm.categoryTime = new Date();
    },
    submitProdCategory(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              if (!this.addTwoId) {
                // 如果没有传入分类Id，则就是添加一级分类
                if (this.checkCategory) {
                  // 修改类别
                  let reqData = {
                      categoryId: this.checkCategory.categoryId,
                      categoryNumber: this.addfirstCateForm.categoryNumber,
                      categoryName: this.addfirstCateForm.categoryName,
                      categoryRemark: this.addfirstCateForm.categoryRemark,
                      categoryTime: this.addfirstCateForm.categoryTime
                  }
                  EditCarFirstCate(reqData).then(response => {
                      let data = response.data
                      this.$message({
                          message: data.msg,
                          type: 'success'
                      })
                      this.submitLoading = false;
                      this.$refs.addfirstCateForm.resetFields();
                      this.resetForm();
                      this.addfirstCatevis = false;
                      this.$emit("update:addFirstCate", false);
                  }).catch(error => {
                      this.submitLoading = false;
                  })

                } else {
                  // 新增类别
                  let reqData = {
                      categoryNumber: this.addfirstCateForm.categoryNumber,
                      categoryName: this.addfirstCateForm.categoryName,
                      categoryRemark: this.addfirstCateForm.categoryRemark,
                      categoryTime: this.addfirstCateForm.categoryTime
                  }
                  this.submitLoading = true;
                  AddCarFirstCate(reqData).then(response => {
                      let data = response.data
                      this.$message({
                          message: data.msg,
                          type: 'success'
                      })
                      this.submitLoading = false;
                      this.$refs.addfirstCateForm.resetFields();
                      this.resetForm();
                      this.addfirstCatevis = false;
                      this.$emit("update:addFirstCate", false);
                  }).catch(error => {
                      this.submitLoading = false;
                  })
                }
              }
              
            } else {
              console.log('error submit!!');
              return false;
            }
        });
    }
  },
  watch: {
    addFirstCate(newVal,oldVal) {  
      this.addfirstCatevis = newVal;
    },
    checkCategory(newVal) {
      if (newVal) {
        this.addfirstCateForm.categoryNumber = newVal.categoryNumber;
        this.addfirstCateForm.categoryName = newVal.categoryName;
        this.addfirstCateForm.categoryTime = newVal.categoryTime;
        this.addfirstCateForm.categoryRemark = newVal.categoryRemark;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  
</style>